<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no, viewport-fit=cover">
    <meta name="keywords" content="蓝桥到家">
    <meta name="description" itemprop="description" content="生鲜副食、饮品乳品、鲜花蛋糕">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在线支付</title>
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="../styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="../styles/iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/payment.css" />
    <link rel="stylesheet" type="text/css" href="../styles/common.css" />
    <script type="text/javascript" src="../js/common.js"></script>
    <script src="../js/zepto.min.js"></script>
</head>

<body>
<div class="wrap">
    <!-- 头部 start -->
    <header class="header_bar">
        <a href="order-confirm.html">
            <div class="header_bar_back"></div>
        </a>
        <div class="header_bar_title">在线支付</div>
    </header>
    <!-- 头部 end -->
    <div class="container" id="app">
        <!-- 订单信息部分 -->
        <div class="order-info">
            <p>
                永辉超市
                <i class="iconfont icon-xiajiantou" id="btnshow" style="font-size: .3rem;" @click="toggleDetail"></i>
            </p>
            <p>&#165; {{ totalPrice.toFixed(2) }}</p>
        </div>

        <!-- 订单明细部分 -->
        <ul class="order-detail" id="detailetBox" v-show="showDetail">
            <li v-for="item in cartItems" :key="item.id">
                <p>{{ item.name }} x {{ item.count }}</p>
                <p>&#165;{{ (item.price * item.count).toFixed(2) }}</p>
            </li>
            <li>
                <p>配送费</p>
                <p>&#165;{{ deliveryFee }}</p>
            </li>
        </ul>

        <!-- 支付方式部分 -->
        <ul class="payment-type">
            <li>
                <img src="../images/common/alipay.png">
            </li>
            <li>
                <img src="../images/common/wechat.png">
            </li>
        </ul>
        <div class="payment-button" @click="goToPayment">
            <button>确认支付</button>
        </div>

    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            cartItems: [],
            deliveryFee: 6,
            showDetail: true
        },
        computed: {
            totalPrice() {
                // 计算商品总价 + 配送费，确保价格和数量为有效数字
                try {
                    const itemsTotal = this.cartItems.reduce((sum, item) => {
                        // 确保item是有效的对象
                        if (!item || typeof item !== 'object') return sum;

                        // 验证price是否为有效数字
                        const price = parseFloat(item.price);
                        if (isNaN(price) || price < 0) return sum;

                        // 验证quantity是否为有效数字
                        const quantity = parseInt(item.count, 10);
                        if (isNaN(quantity) || quantity <= 0) return sum;

                        return sum + (price * item.count);
                    }, 0);

                    // 验证配送费
                    const deliveryFee = parseFloat(this.deliveryFee);
                    const finalTotal = isNaN(deliveryFee) || deliveryFee < 0 ? itemsTotal : itemsTotal + deliveryFee;

                    // 确保最终总价是有效数字
                    return isNaN(finalTotal) ? 0 : finalTotal;
                } catch (error) {
                    console.error('计算总价出错:', error);
                    return 0;
                }
            }
        },
        mounted() {
            // 优先从currentOrder加载订单数据
            try {
                const currentOrder = localStorage.getItem('currentOrder');
                if (currentOrder) {
                    const order = JSON.parse(currentOrder);
                    this.cartItems = order.items || [];
                    this.deliveryFee = order.deliveryFee || 6;
                    console.log('从currentOrder加载订单数据:', this.cartItems);
                } else {
                    // 如果没有currentOrder，从cart加载
                    const cartData = localStorage.getItem('cart');
                    if (cartData) {
                        this.cartItems = JSON.parse(cartData);
                        // 数据清洗：确保price和quantity是有效数字
                        this.cartItems = this.cartItems.filter(item => {
                            // 检查是否有必要字段
                            if (!item || !item.id || !item.name) return false;

                            // 验证并转换price
                            const price = parseFloat(item.price);
                            if (isNaN(price) || price <= 0) return false;

                            // 验证并转换quantity
                            const quantity = parseInt(item.quantity, 10);
                            if (isNaN(quantity) || quantity <= 0) return false;

                            // 更新为处理后的值
                            item.price = price;
                            item.count = quantity;
                            return true;
                        });
                        console.log('从cart加载购物车数据:', this.cartItems);
                    } else {
                        console.log('购物车为空');
                        this.cartItems = [];
                    }
                }
            } catch (error) {
                console.error('加载数据出错:', error);
                this.cartItems = [];
            }
        },
        methods: {
            toggleDetail() {
                this.showDetail = !this.showDetail;
            },
            goToPayment() {
                // 保存订单信息到localStorage
                const orderData = {
                    items: this.cartItems,
                    totalPrice: this.totalPrice,
                    deliveryFee: this.deliveryFee,
                    status: 'pending',
                    date: new Date()
                };
                localStorage.setItem('currentOrder', JSON.stringify(orderData));

                // 清空购物车
                localStorage.removeItem('cart');

                // 跳转到订单页面
                location.href = 'order.html';
            }
        }
    })
</script>

</html>